<template>
	<navigatorComp title="个人信息" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<view class="content">
		<view class="editUser_box">
			<view class="uploadImage" @click="uploadAImg">
				<image v-if="userForm.headUrl" :src="userForm.headUrl" mode=""></image>
				<image v-else src="http://112.124.50.179:8888/imgs/default_avater.png" mode=""></image>
				<text>上传头像</text>
			</view>
			<view class="editUser_box_item">
				<view class="editUser_box_item_title display_flex">昵称</view>
				<view class="display_flex">
					<u--input placeholder="输入昵称" v-model.trim="userForm.nickname" fontSize="28rpx" color="#fff"
						border="none" inputAlign="right" maxlength="8"
						placeholderStyle="color:#999999;font-size:28rpx;"></u--input>
					<image src="http://112.124.50.179:8888/imgs/mine/arrow-right.png" mode=""></image>
				</view>
			</view>
			<view class="editUser_box_item">
				<view class="editUser_box_item_title display_flex">性别</view>
				<view class="display_flex" @click="showGenderPopup = true">
					<view :class="['placeholder', userForm.gender && 'value']">
						{{ !userForm.gender ? '选择性别' : userForm.gender === 1 ? '男' : '女' }}
					</view>
					<image src="http://112.124.50.179:8888/imgs/mine/arrow-right.png" mode=""></image>
				</view>
			</view>
			<view class="editUser_box_item">
				<view class="editUser_box_item_title display_flex">生日</view>
				<view class="display_flex" @click="openBirthdayPopup">
					<view :class="['placeholder', userForm.birthday && 'value']">
						{{ userForm.birthday || '选择日期' }}
					</view>
					<image src="http://112.124.50.179:8888/imgs/mine/arrow-right.png" mode=""></image>
				</view>
			</view>
			<view class="editUser_box_item"
				@click="goUrl(`/subPages/mine/setting/bindPhone?phoneNumber=${userForm.phoneNumber}`)">
				<view class="editUser_box_item_title display_flex">手机号</view>
				<view class="display_flex">
					<view :class="['placeholder', userForm.phoneNumber && 'value']">
						{{ userForm.phoneNumber ? ecyptPhone(userForm.phoneNumber) : '去绑定' }}
					</view>
					<image src="http://112.124.50.179:8888/imgs/mine/arrow-right.png" mode=""></image>
				</view>
			</view>
			<view class="editUser_box_item"
				@click="goUrl(`/subPages/mine/setting/realname_auth?isAuth=${userForm.setAuthentication}&name=${userForm.name}&cardId=${userForm.cardId}`)">
				<view class="editUser_box_item_title display_flex">实名认证</view>
				<view class="display_flex">
					<view :class="['placeholder', userForm.setAuthentication && 'value']">
						{{ userForm.setAuthentication ? '已认证' : '去认证' }}
					</view>
					<image src="http://112.124.50.179:8888/imgs/mine/arrow-right.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>

	<footerBtn name="保存" @clickBtn="handleSubmit" bgcColor="none"></footerBtn>

	<!-- 性别选择 -->
	<u-popup :show="showGenderPopup" bgColor="rgba(0,0,0,0)" @close="closeMore" custom-style="padding:0 16rpx 0;">
		<view class="button_list">
			<u-button @click="chooseGender(1)" shape="circle"
				:custom-style="{ ...moreBtnStyle, marginBottom: 0, borderRadius: 0 }">
				男
			</u-button>
			<u-button @click="chooseGender(2)" shape="circle"
				:custom-style="{ ...moreBtnStyle, marginBottom: 0, borderRadius: 0 }">
				女
			</u-button>
		</view>

		<u-button shape="circle" :custom-style="{ ...moreBtnStyle, fontWeight: 600, borderRadius: '26rpx' }"
			@click="showGenderPopup = false">
			取消
		</u-button>
	</u-popup>

	<!-- 选择生日弹框 -->
	<up-datetime-picker :closeOnClickOverlay="true" :show="birthdayPopup.show" v-model="birthdayPopup.value" mode="date"
		:minDate="new Date('1920/1/1')" :maxDate="new Date()" :formatter="formatter" @cancel="birthdayPopup.show = false"
		@confirm="confirmTime($event)"></up-datetime-picker>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue';
	import _ from 'lodash';
	import navigatorComp from '/components/navigator/index.vue';
	import footerBtn from '/components/footerBtn/index.vue';
	import {
		timeFormat
	} from '@/node_modules/uview-plus';
	import MineApi from '@/API/mine/index.js';
	import ecyptPhone from '@/utils/ecyptPhone';

	const mineApi = new MineApi();

	const $chooseImg = getCurrentInstance().appContext.config.globalProperties.$chooseImg;

	const userForm = reactive({
		headUrl: '',
		birthday: '',
		gender: 0,
		nickname: '',
		phoneNumber: '',
		setAuthentication: 0,
		name: '',
		cardId: ''
	});
	const showGenderPopup = ref(false);
	const moreBtnStyle = {
		height: '120rpx',
		backgroundColor: '#fff',
		fontWeight: '400',
		fontSize: '40rpx',
		color: '#007AFF',
		marginBottom: '16rpx'
	};
	// 开始时间弹框
	const birthdayPopup = reactive({
		show: false,
		value: new Date()
	});

	onShow(() => {
		getUser();
	});

	/**
	 * 获取用户信息
	 */
	const getUser = async () => {
		let res = await mineApi.getUserInfo();
		if (res.code === 0) {
			userForm;
			Object.keys(userForm).forEach((item) => {
				userForm[item] = res.data[item];
			});
		}
	};

	//节流
	const handleSubmit = _.throttle(function() {
		submit();
	}, 2000);

	/**
	 * 点击保存
	 */
	const submit = () => {
		let params = {
			headUrl: userForm.headUrl,
			nickname: userForm.nickname,
			gender: userForm.gender,
			birthday: userForm.birthday
		};
		mineApi.setUserInfo(params).then((res) => {
			if (res.code === 0) {
				uni.showToast({
					title: '修改成功'
				})
			}
		});
	};

	/**
	 * 选择性别
	 */
	const chooseGender = (gender) => {
		userForm.gender = gender;
		showGenderPopup.value = false;
	};

	/**
	 * 打开生日弹框
	 */
	const openBirthdayPopup = () => {
		if (userForm.birthday) {
			birthdayPopup.value = new Date(userForm.birthday);
		}
		birthdayPopup.show = true;
	};

	/**
	 * 确认时间
	 */
	const confirmTime = (e) => {
		userForm.birthday = timeFormat(e.value, 'yyyy-mm-dd');
		birthdayPopup.show = false;
	};

	const uploadAImg = () => {
		$chooseImg
			.chooseImg({
				formData: {
					fileType: 'image',
					fileDirType: 'personal'
				},
				countLimit: 1
			})
			.then((res) => {
				setTimeout(() => {
					uni.showLoading();
					res.forEach((ele) => {
						userForm.headUrl = JSON.parse(res[0].img_url.data).fileUrl;
					});
					uni.hideLoading();
				}, 500);
			});
	};

	/**
	 * 时间格式化
	 */
	const timeFormatFunc = (date) => {
		return timeFormat(date, 'yyyy年mm月dd');
	};

	const formatter = (type, value) => {
		if (type === 'year') {
			return `${value}年`;
		}
		if (type === 'month') {
			return `${value}月`;
		}
		if (type === 'day') {
			return `${value}日`;
		}
		return value;
	};

	const goUrl = (url) => {
		uni.navigateTo({
			url: url
		});
	};
</script>

<style lang="scss">
	page {
		background-color: #121512;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.content {
		padding: 24rpx 32rpx;
	}

	.editUser_box {
		padding: 40rpx 24rpx 48rpx 32rpx;
		box-sizing: border-box;
		width: 100%;
		background: #292b2a;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin-bottom: 24rpx;

		.uploadImage {
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 33rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 48rpx;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-bottom: 16rpx;
			}
		}

		.editUser_box_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;

			&:last-child {
				margin-bottom: 0;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 8rpx;
			}

			.editUser_box_item_title {
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 33rpx;
			}

			.placeholder {
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 33rpx;
			}

			.value {
				color: #ffffff;
			}
		}
	}

	.button_list {
		width: 100%;
		border-radius: 26rpx;
		margin-bottom: 16rpx;
		overflow: hidden;
		opacity: 0.8;
	}
</style>